<template>
    <div v-if="visible" class="dialog-mask" @click.self="handleClose">
      <div class="dialog-content">
        <div class="dialog-header">
          <h3>{{ title }}</h3>
          <span class="close-btn" @click="handleClose">×</span>
        </div>
        <div class="dialog-body">
          <slot>
            <textarea 
              v-model="inputContent"
              class="dialog-textarea"
              :placeholder="placeholder"
            ></textarea>
          </slot>
        </div>
        <div class="dialog-footer">
          <button class="submit-btn" @click="handleSubmit">提交</button>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, watch } from 'vue';
  
  const props = defineProps({
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: '请输入'
    },
    content: {
      type: String,
      default: ''
    }
  });
  
  const emit = defineEmits(['update:visible', 'submit', 'close']);
  
  const inputContent = ref('');
  
  // 监听content变化
  watch(() => props.content, (newVal) => {
    inputContent.value = newVal.value;
  }, { immediate: true });
  
  const handleClose = () => {
    emit('update:visible', false);
    emit('close');
  };
  
  const handleSubmit = () => {
    emit('submit', inputContent.value);
    handleClose();
  };
  </script>
  
  <style lang="scss" scoped>
  .dialog-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
  }
  
  .dialog-content {
    background-color: #fff;
    border-radius: 8px;
    width: 600px;
    max-width: 90%;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  }
  
  .dialog-header {
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
  
    h3 {
      margin: 0;
      font-size: 18px;
      color: #333;
    }
  
    .close-btn {
      font-size: 24px;
      color: #999;
      cursor: pointer;
      padding: 4px;
      
      &:hover {
        color: #666;
      }
    }
  }
  
  .dialog-body {
    padding: 20px;
  }
  
  .dialog-textarea {
    width: 100%;
    height: 257px;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    resize: none;
    font-size: 14px;
    line-height: 1.5;
    
    &:focus {
      outline: none;
      border-color: #40a9ff;
    }
  }
  
  .dialog-footer {
    padding: 16px 20px;
    border-top: 1px solid #eee;
    text-align: center;
  }
  
  .submit-btn {
    background-color: #126983;
    color: white;
    border: none;
    padding: 8px 16px;
    width:132px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    
    &:hover {
      background-color: #126983;
    }
  }
  </style>